<template>
  <div class="login-box">
    <div class="login-logo">
      <!-- <svg-icon name="logo" :size="45" /> -->
      <img src="~@/assets/images/logo.png" width="45" />
      <h1 class="mb-0 ml-2 text-3xl font-bold">统一登录平台</h1>
    </div>
    <a-form layout="horizontal" :model="loginFormModel" @submit.prevent="handleSubmit">
      <a-form-item>
        <a-input v-model:value="loginFormModel.username" size="large" placeholder="admin">
          <template #prefix>
            <Icon icon="ant-design:user-outlined" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input v-model:value="loginFormModel.password" size="large" type="password" placeholder="a123456"
          autocomplete="new-password">
          <template #prefix>
            <Icon icon="ant-design:lock-outlined" />
          </template>
        </a-input>
      </a-form-item>
      <!-- <a-form-item>
        <a-input
          v-model:value="loginFormModel.verifyCode"
          placeholder="验证码"
          :maxlength="4"
          size="large"
        >
          <template #prefix> <Icon icon="ant-design:safety-outlined" /> </template>
          <template #suffix>
            <img
              :src="captcha"
              class="absolute right-0 h-full cursor-pointer"
              @click="updateCaptcha"
            />
          </template>
        </a-input>
      </a-form-item> -->
      <a-form-item>
        <a-button type="primary" html-type="submit" size="large" :loading="loading" block>
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { message, Modal } from 'ant-design-vue';
import { Icon } from '@/components/basic/icon';
import { useUserStore } from '@/store/modules/user';
import Api from '@/api/';
import { to } from '@/utils/awaitTo';
import type path from 'path';

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();

const loading = ref(false);

const loginFormModel = ref({
  username: "",
  password: "",
  response_type: String,
  redirect_url: String
});

// const captcha = ref('');
// const updateCaptcha = async () => {
//   const data = await Api.captcha.captchaCaptchaByImg({ width: 100, height: 50 });
//   captcha.value = data.img;
//   loginFormModel.value.captchaId = data.id;
// };
// updateCaptcha();

debugger


const handleSubmit = async () => {
  const { username, password } = loginFormModel.value;
  // const { username, password, verifyCode } = loginFormModel.value;
  if (username.trim() == '' || password.trim() == '') {
    return message.warning('用户名或密码不能为空！');
  }
  // if (!verifyCode) {
  //   return message.warning('请输入验证码！');
  // }
  message.loading('登录中...', 0);
  loading.value = true;
  console.log(loginFormModel.value);
  // params.password = md5(password)

  let response_type = route.query.response_type;
  let redirect_url = route.query.redirect_url;
  if (!response_type) {
    response_type = "token"
    redirect_url = null
  }
  console.log(response_type);
  console.log(redirect_url);
  loginFormModel.value.response_type = response_type;
  loginFormModel.value.redirect_url = redirect_url;
  debugger

  const [err] = await to(userStore.login(loginFormModel.value));
  if (err) {
    Modal.error({
      title: () => '提示',
      content: () => err.message,
    });
    // updateCaptcha();
  } else {
    message.success('登录成功！');
    if (response_type && redirect_url) {
      debugger
      router.push({ path: '/account/sso', query: { response_type: response_type, redirect_url: redirect_url } })
      return
    }
    setTimeout(() => router.replace((route.query.redirect as string) || '/'));
  }
  loading.value = false;
  message.destroy();
};
</script>

<style lang="less" scoped>
.login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding-top: 240px;
  background: url('@/assets/login.svg');
  background-size: 100%;

  .login-logo {
    display: flex;
    align-items: center;
    margin-bottom: 30px;

    .svg-icon {
      font-size: 48px;
    }
  }

  :deep(.ant-form) {
    width: 400px;

    .ant-col {
      width: 100%;
    }

    .ant-form-item-label {
      padding-right: 6px;
    }
  }
}
</style>
